<template>
  <div class="login_container">
    <div class="login_form">
      <p class="login_title">管理系统</p>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>

        </el-form-item>

      </el-form>

    </div>

  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data() {
    return {
      form:{
        userName:'',
        password:''
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],

      }
    }
  },
  methods:{
    onSubmit() {
      this.$http.post('/SysUser/login',this.form).then(res =>{
        if(res.data.isSuccess){
          if( res.data.data.sysRoleId == null){
            this.$alert('请联系管理员给用户赋值角色', '登录账号异常', {
              confirmButtonText: '确定'
            });
          } else {
            //登录成功
            //1.保存token到 head中
            sessionStorage.setItem("Authorization", res.data.data.token);
            sessionStorage.setItem("userName", this.form.userName);
            sessionStorage.setItem("userId", res.data.data.id);
            sessionStorage.setItem("sysRoleId", res.data.data.sysRoleId);
            //2.跳转到主页面
            this.$router.push('/home').catch(err => err);
          }
        } else {
          this.$message.error(res.data.data);
        }
      }).catch(reason => {

      })
    }
  }
}
</script>

<style lang="less">
.login_container{
  width: 100%;
  height: 100vh;
  background-color: rgba(242,242,242,1);
  background-position: center  bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100%;
  background-origin: border-box;
  background-image: url("@/assets/beijing.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  .login_form{
    width: 510px;
    margin: 0px auto;
    padding: 0 55px 15px 35px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 25px #cac6c6;
    .login_title{
      font-family: '微软雅黑 Bold', '微软雅黑';
      font-weight: 700;
      text-decoration: none;
      color: rgb(0,121,254);
      font-size: 32px;
      margin-top: 50px;
      margin-bottom: 30px;
      text-align: center;
    }
  }

}


</style>
